<template>
	<view class="addDevice-container">
		<view class="bg-box">
			<image src="@/static/addDevice/page-bg.png" class="page-bg"></image>
			<view class="title">扫码添加设备</view>
			<view class="desc">扫描柜机二维码自动识别</view>
		</view>
		
		<view class="form-box">
			<view @click="toChooseStore" class="form-item">
				<view class="label">选择商户</view>
				<view class="value-box">
					<text v-if="true" class="fakePlaceholder">请选择商户</text>
					<text v-if="false" class="value">sh0987654</text>
					<image src="@/static/go-icon2.png" class="goIcon"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">摆放位置</view>
				<view class="value-box">
					<input v-model="pageForm.position" placeholder="请输入内容" type="text" placeholder-class="place-holder" class="positionInput" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">柜机SN码</view>
				<view class="value-box">
					<input v-model="pageForm.SN" placeholder="点击右侧扫描自动识别" type="text" placeholder-class="place-holder" class="positionInput" />
					<image @click="scanCode" src="@/static/addDevice/icon-scan.png" class="scanIcon"></image>
				</view>
			</view>
		
			<!-- 保存按钮 -->
			<view class="save-btn-box">
				<view class="save-btn">保存</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 监听返回的商户数据
uni.$on('chooseStore', (data) => {
	console.log('返回的商户数据：', data);
})

// 页面表单绑定的数据
const pageForm = ref({
	position: '',
	SN: '',
})

// 扫码
const scanCode = () => {
	uni.scanCode({
		success: (res) => {
			console.log('扫码结果：', res)
			const reg = /id=(\w+)/;
			const sn = res.result.match(reg) ? res.result.match(reg)[1] : '';
			console.log('匹配到的sn：', sn);
			pageForm.value.SN = sn;
		}
	})
}

// 跳转到选择商户页面
const toChooseStore = () => {
	uni.navigateTo({
		url: '/subPages/myStore/index?pageType=chooseStore'
	});
};
</script>

<style lang="scss" scoped>
.addDevice-container {
	position: relative;
	height: 100vh;
	background-color: #f9f9f9;
	overflow: hidden;

	.bg-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		
		.page-bg {
			width: 100%;
			height: 672rpx;
		}

		.title {
			color: #333;
			font-size: 40rpx;
			font-weight: 600;
			line-height: 56rpx;
			margin-bottom: 18rpx;
		}

		.desc {
			color: #999;
			font-size: 28rpx;
			line-height: 40rpx;
		}
	}
	
	.form-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 48rpx 40rpx 0;
		border-radius: 48rpx 48rpx 0 0;
		background-color: #fff;
		
		.form-item {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			height: 104rpx;
			border-bottom: 2rpx solid #f0f0f0;
			
			.label {
				white-space: nowrap;
				min-width: 6em;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
			}
			
			.value-box {
				display: flex;
				gap: 14rpx;
				flex-wrap: nowrap;
				align-items: center;
				
				.fakePlaceholder,.value {
					color: #ccc;
					font-size: 28rpx;
					line-height: 40rpx;
				}
				
				.value {
					color: #333;
				}
				
				.positionInput {
					text-align: right !important;
					font-size: 28rpx;
				}
				
				.goIcon {
					width: 10rpx;
					height: 16rpx;
				}
				
				.scanIcon {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	
		.save-btn-box {
			display: flex;
			justify-content: center;
			height: 190rpx;
			padding-top: 24rpx;
			margin-top: 24rpx;
			
			.save-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				width: 646rpx;
				height: 98rpx;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 96rpx;
				background-color: $uni-main-color;
			}
		}
	}
}

:deep(.place-holder) {
	color: #ccc !important;
	font-size: 28rpx;
}
</style>
